例題５ 色と線種

code:color01.js

'use strict'

function setup() {

createCanvas(255, 255);

colorMode(RGB,255,255,255,1);

// 線の色を白

stroke('white');

// 線の太さを５ピクセル

strokeWeight(5)

}

function draw() {

background(220);

/*

mouseX, mouseY はマウスの座標

その座標の位置によって円の色を変える

*/

fill(mouseX%256, mouseY%256,(mouseX+mouseY)%256);

ellipse(width/2, height/2, width, height)

}

code:color02.js

'use strict'

function setup() {

createCanvas(500, 500);

colorMode(RGB,255,255,255,1);

// 背景を白で塗る

background(255)

// 線の色を白

stroke('white');

// 線の太さを５ピクセル

strokeWeight(2)

}

function draw() {

//background(220);

/*

mouseX, mouseY はマウスの座標

円の中心はマウスの座標なので、マウスを移動すると円が追いかけてくるように見える

その座標の位置によって円の色を変える

透明度を０から１の乱数で指定しているので、その値によって透けて見える

*/

fill(mouseX%256, mouseY%256,(mouseX+mouseY)%256,random(1));

ellipse(mouseX, mouseY,50,50);

}

// ダブルクリックすると背景を白で塗りつぶすので描画は消える

function doubleClicked(){

background(255)

}

code:color03.js

'use strict'

function setup() {

createCanvas(500, 500);

colorMode(RGB,255,255,255,1);

// 背景を白で塗る

background(255)

// 線の色を白

stroke('white');

// 線の太さを５ピクセル

strokeWeight(2)

}

function draw() {

}

// ダブルクリックすると背景を白で塗りつぶすので描画は消える

function doubleClicked(){

background(255)

}

function mousePressed(){

/*

クリックしたときの座標の位置によって円の色塗る

透明度を０から１の乱数で指定しているので、その値によって透けて見える

*/

fill(mouseX%256, mouseY%256,(mouseX+mouseY)%256,random(1));

}

function mouseDragged(){

/*

マウスをドラッグしている間、円を描く

mouseX, mouseY はマウスの座標

円の中心はマウスの座標なので、マウスを移動すると円が追いかけてくるように見える

*/

ellipse(mouseX, mouseY,50,50);

}